<template>
  <div>
    <cj-popup v-model="isShowPresent" :closeable="true" close-icon-position="bottom-center" close-icon="icon-shanchu" @closed="closePresent" class="c-w85 c-br6">
      <div class="c-w100" v-if="gift">
        <div class="c-p dia-head-bg">
          <img class="c-pa c-p-t16 c-pz-1" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/vip/gift-package-top.png" alt="">
        </div>
        <div class="dialog-mid c-w100">
          <div class="c-w100 c-ph64 c-pb20 c-maxh400 c-contexty-scroll">
            <!-- 实物赠送 -->
            <template v-if="gift.isFreeGood == 1 && ((gift.freeGoodArr && gift.freeGoodArr.length > 0) || gift.freeGoodName)">
              <template v-if="gift.freeGoodArr && gift.freeGoodArr.length > 0">
                <div v-for="(item, index) in gift.freeGoodArr" :key="index" class="c-mb20 c-bg-white c-hh120 c-flex-row c-w100">
                  <div class="c-h c-ww124 c-flex-shrink0 c-flex-column c-justify-sb c-aligni-center c-fc-white">
                    <img class="c-w100 c-h" :src="$addXossFilter(item.relateCover, '../../../assets/defult270.png')" />
                  </div>
                  <div class="c-flex-grow1 c-w0 c-flex-row c-justify-sb c-aligni-center c-ph14 c-pv16">
                    <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-textAlign-l">
                      <div class="c-fs30 c-fc-xblack c-fw-b">赠送实物</div>
                      <div class="c-fs22 c-fc-gray c-text-ellipsis1 c-mt10">{{item.relateName != null ? item.relateName :'实体商品'}}</div>
                    </div>
                    <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-flex-shrink0" style="background: #EE6D3F" @click="goShopDetail(item)">查看</div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="c-mb20 c-bg-white c-hh120 c-flex-row c-w100">
                  <div class="c-h c-ww124 c-flex-shrink0 c-flex-column c-justify-sb c-aligni-center c-fc-white">
                    <img class="c-w100 c-h" :src="$addXossFilter(gift.freeGoodImg, '../../../assets/defult270.png')" />
                  </div>
                  <div class="c-flex-grow1 c-w0 c-flex-row c-justify-sb c-aligni-center c-ph14 c-pv16">
                    <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-textAlign-l">
                      <div class="c-fs30 c-fc-xblack c-fw-b">赠送实物</div>
                      <div class="c-fs22 c-fc-gray c-text-ellipsis1 c-mt10">{{gift.freeGoodName != null ? gift.freeGoodName :''}}</div>
                    </div>
                    <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-flex-shrink0" style="background: #EE6D3F" @click="getGoodsDetail">查看</div>
                  </div>
                </div>
              </template>
            </template>
            <div class="family-card-bg c-mb20 c-bg-white c-hh120 c-flex-row c-w100" v-if="gift.familyCard">
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv16">
                <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-fc-white">
                  <span class="c-fs24">{{gift.familyCard.name ? gift.familyCard.name : '亲情卡'}}</span>
                  <span class="c-fs22">{{'包含' +gift.familyCard.num + '个商品'}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c" style="background: #FFFFFF;color:#55B5FF;" @click="goPresent">查看</div>
              </div>
            </div>
            <div class="c-mb20 c-bg-white c-hh120 c-flex-row c-w100" v-if="gift.points">
              <div class="c-h c-ww124 c-pv20 c-flex-column c-justify-sb c-aligni-center c-fc-white">
                <img class="c-h" src="../../../assets/i/wap/vip/point.png" />
              </div>
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-ph14 c-pv16">
                <div class="c-flex-column c-justify-sb c-textAlign-l">
                  <span class="c-fs30 c-fc-xblack c-fw-b">{{customPointName}}</span>
                  <span class="c-fs22 c-fc-gray">{{'奖励'+gift.points + customPointName}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c" style="background: #EE6D3F" @click="goMyPointDetail">查看</div>
              </div>
            </div>
            <div class="c-mb20 c-bg-white c-hh120 c-flex-row equity-vip-bg" v-if="gift.vip && gift.vip != undefined">
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv16">
                <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-fc-white">
                  <span class="c-fs24">VIP</span>
                  <span class="c-fs22">{{gift.vip + '天体验卡'}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-flex-shrink0 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-bg-white c-fc-mblue" @click="goVipCentural">查看</div>
              </div>
            </div>
            <div class="c-mb20 c-bg-white c-hh120 c-flex-row equity-svip-bg" v-if="gift.svip && gift.svip != undefined">
              <div class="c-flex-row c-justify-sb c-aligni-center c-w0 c-flex-grow1 c-pv16">
                <div class="c-flex-column c-justify-sb c-h c-textAlign-l c-fc-white">
                  <span class="c-fs24">SVIP</span>
                  <span class="c-fs22">{{gift.svip + '天体验卡'}}</span>
                </div>
                <div class="c-ww88 c-hh36 c-flex-shrink0 c-br18 c-fs22 c-fc-white c-lh36 c-textAlign-c c-bg-white c-fc-sorange" @click="goVipCentural">查看</div>
              </div>
            </div>
            <template v-if="gift.coupon && gift.coupon.length > 0">
              <coupon-item-com :key="index" v-for="(item, index) in gift.coupon" :couponInfo="item" :size="'small'" :showFooter="false" class="c-textAlign-l" :class="index==gift.coupon.length-1?'':'c-mb20'">
              </coupon-item-com>
            </template>
          </div>
        </div>
        <div class="c-p c-w100">
          <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/vip/gift-package-bot.png" alt="" class="c-w100 c-pa c-p-t-1 c-pz-1">
          <div class="c-fc-white c-textAlign-c c-fs22 c-pt40 c-ph64 c-w100">
            <div class="c-hh86 c-flex-row c-justify-center c-aligni-center c-wb-ba">
              {{'可在个人中心-'+ (gift.familyCard ? '“领赠记录”，':'') + (gift.points ? customPointName+'“明细”，':'') + (gift.coupon && gift.coupon.length>0 ? '“优惠券”':'') + '入口查看'}}
            </div>
          </div>
        </div>
      </div>
    </cj-popup>
    <!-- 实物详情 -->
    <cj-popup v-model="isShowGoodsDetail" class="c-br20 c-w80">
      <div class="c-mt48 c-mb40 c-ph40 c-maxh400 c-contexty-scroll c-contextX-hidden c-ws-n">
        <div class="goodsDetail" v-html="gift ? gift.freeGoodDesc : ''"></div>
      </div>
      <div class="c-flex-row c-w100 c-aligni-center c-justify-center c-mb30">
        <div @click="isShowGoodsDetail = false" class="c-fs22 c-fc-white c-ww220 c-hh50 c-flex-row c-aligni-center c-justify-center c-br30 knowBtn">
          <div>我知道了</div>
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import couponItemCom from "@/components/templates/couponItemCom.vue";
export default {
  components: {
    couponItemCom
  },
  props: {
    gift: {
      type: Object,
      default: () => {}
    },
    showPresent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      isShowGoodsDetail: false, // 是否显示实物详情
      cfrom: global.ckFrom,
      isShowPresent: false
    }
  },
  watch: {
    showPresent: {
      handler(val) {
        this.isShowPresent = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    goVipCentural() {
      this.$emit('closePresent')
      this.$routerGo(this, "replace", { path: "/member/vip/vipUp" });
    },
    goMyValueVoucher(type, prodType) {
      this.$emit('goMyValueVoucher');
      if (prodType == this.cfrom.shareholderPayVoucher ) {
        this.$routerGo(this, "push", { path: "/member/myValueVoucher/myValueVoucher", query: { couponType: 4 } });
      } else if (type == 1) {
        this.$routerGo(this, "push", { path: "/member/myValueVoucher/myValueVoucher", query: { couponType: 1 } });
      } else {
        this.$routerGo(this, "push", { path: "/member/myValueVoucher/myValueVoucher", query: { couponType: 2 } });
      }
    },
    goMyPointDetail() {
      this.$emit('goMyPointDetail');
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralDetail" });
    },
    goPresent() {
      this.$emit('goPresent');
      this.$routerGo(this, "push", { path: "/member/presentCourse/presentCourseList" });
    },
    goShopDetail(goodsInfo) {
      this.$routerGo(this, "push", {
        path: '/mall/shopDetail/shopDetail',
        query: {
          shopNo: goodsInfo.relateId
        }
      })
    },
    // 显示商品详细信息
    getGoodsDetail() {
      this.isShowGoodsDetail = true;
    },
    closePresent() {
      this.$emit('closePresent')
    }
  },
}
</script>

<style scoped>
.buy-btn {
  color: #eadbac;
  background: linear-gradient(#252531 0%, #4e4e5c 0%, #23232f 100%);
}
.coupon-mb2 {
  background: url("../../../../public/i/wap/vip/coupon-mb2.png");
  background-size: cover;
}
.c-ww124 {
  width: 3.1rem;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.content {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1003;
  margin: 0 auto;
  background-color: #fff;
}
.c-bg-coupon {
  background-color: #f4f7f9;
}
.close {
  position: absolute;
  right: 0.6rem;
  top: 0.4rem;
}
.c-maxh400 {
  max-height: 10rem;
}
.c-br18 {
  border-radius: 0.45rem;
}
/* 关注二维码样式 */
.maskerContent {
  width: 90%;
  position: fixed;
  top: 1rem;
  left: 5%;
  z-index: 1005;
}
.payMasker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  width: 100%;
  height: 100%;
  background-color: #f0f1f5;
}
.payPolitelyMasker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.view-btn {
  border: 1px solid #23db85;
}
.c-mb60 {
  margin-bottom: 1.5rem;
}
.dialog-mid {
  background: url("../../../assets/i/wap/vip/gift-package-mid.png") no-repeat;
  background-size: 100% 100%;
  padding-right: 0.4rem;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/coupon_left.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.all-coupon-bg {
  background-color: #f4f7f9;
}

.family-card-bg {
  background: url("../../../assets/i/wap/vip/familyCard.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-vip-bg {
  background: url("../../../assets/i/wap/recommend/VIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-svip-bg {
  background: url("../../../assets/i/wap/recommend/SVIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.dia-head-bg {
  padding-top: 5rem;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-left1 {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.knowBtn {
  background: linear-gradient(
    -90deg,
    rgba(72, 147, 248, 1),
    rgba(72, 147, 248, 0.7)
  );
}
.goodsDetail >>> img {
  width: 100%;
}
.goodsDetail >>> p {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.goodsDetail >>> span {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.addressSelected >>> .vux-popup-picker-placeholder {
  color: #cccccc;
}
.invalid >>> .vux-popup-picker-placeholder {
  color: #fc583d !important;
}
.invalid::-webkit-input-placeholder {
  color: #fc583d;
}
.invalid::-moz-input-placeholder {
  color: #fc583d;
}
.invalid::-ms-input-placeholder {
  color: #fc583d;
}
input.invalid::-webkit-input-placeholder {
  color: #fc583d;
}
input.invalid::-moz-input-placeholder {
  color: #fc583d;
}
input.invalid::-ms-input-placeholder {
  color: #fc583d;
}
</style>
